<template>
<div>
  <div>这是我新建的页面</div>
  <el-card>
    <el-button @click="openDialog">显示用于打开和保存文件、警报等的本机系统对话框。</el-button>
    <p>{{file}}</p>
    <el-button  @click="showMessageBox">dialog.showMessageBox</el-button>
    <el-button  @click="showErrorBox">dialog.showErrorBox</el-button>
  </el-card>
  <el-card :title="`BrowserWindow`">
    <el-button @click="BrowserWindow">创建并控制浏览器窗口。</el-button>
    <el-button @click="BrowserWindowParent">父子窗口 。通过使用 parent 选项，你可以创建子窗口</el-button>
    <el-button @click="BrowserWindowModel">模态窗口是禁用父窗口的子窗口，创建模态窗口必须设置 parent 和 modal 选项：</el-button>
    <el-button @click="BrowserView">BrowserView 被用来让 BrowserWindow 嵌入更多的 web 内容。 它就像一个子窗口，除了它的位置是相对于父窗口。 这意味着可以替代webview标签。</el-button>
  </el-card>

</div>
</template>

<script>
const { dialog, BrowserWindow, BrowserView } = require('electron').remote
export default {
  name: 'home',
  data () {
    return {
      file: null
    }
  },
  methods: {
    openDialog () {
      let vm = this
      dialog.showOpenDialog({
        title: '选择文件',
        properties: ['openFile', 'multiSelections']
      }, function (e) {
        vm.inputFiles(e)
      })
    },
    inputFiles (e) {
      this.file = e
    },
    showMessageBox () {
      dialog.showMessageBox({
        message: 'hellow dag',
        type: 'info',
        title: '你好！'
      })
    },
    showErrorBox () {
      dialog.showErrorBox('你好！', 'hellow dag')
    },
    BrowserWindow () {
      const win = new BrowserWindow({ width: 800, height: 600, backgroundColor: '#2e2c29' })
      win.loadURL('https://github.com')
      win.loadFile('index.html')
    },
    BrowserWindowParent () {
      const top = new BrowserWindow()
      const child = new BrowserWindow({ parent: top })
      child.show()
      top.show()
    },
    BrowserWindowModel () {
      // const child = new BrowserWindow({ parent: top, modal: true, show: false })
      // child.loadURL('https://github.com')
      // child.once('ready-to-show', () => {
      //   child.show()
      // })
    },
    BrowserView () {
      const win = new BrowserWindow({ width: 800, height: 600 })

      const view = new BrowserView()
      win.setBrowserView(view)
      view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
      //  view.webContents.loadURL('https://electronjs.org')
      view.setBackgroundColor('#000000')
    }
  }
}
</script>

<style scoped>

</style>